<template>
  <div class="loginIndexMain" v-if="item" :style="{ backgroundColor: item.loginPageBgColor }">
    <div
      class="style1"
      v-if="item.loginStyle === 1"
    >
      <span class="headImgBox">
        <img :src="item.loginHeadImg" v-if="item.loginHeadImg" alt="" class="headIcon" />
      </span>
      <div class="content">
        <div class="head" v-if="item.showStyle1Head">
          <i :class="item.style1HeadLogo" v-if="item.style1HeadLogo.indexOf('icon')>-1"></i>
          <img :src="item.style1HeadLogo" v-if="item.style1HeadLogo.indexOf('icon')==-1 && item.style1HeadLogo" alt="" />
          <span v-if="item.style1HeadTitle">{{ item.style1HeadTitle }}</span>
        </div>
        <div class="item">
          <i class="iconfont icon-shoujihao5"></i>
          <input
            type="text"
            autocomplete="new-acct"
            v-model="account"
            :readonly="readonly"
            maxlength="30"
            flag="account"
            class="account"
            placeholder="请输入账号"
          />
        </div>
        <div class="item">
          <i class="iconfont icon-tianchongxing-"></i>
          <input
            type="password"
            autocomplete="new-pwd"
            v-model="password"
            :readonly="readonly"
            maxlength="30"
            class="password"
            placeholder="请输入密码"
          />
          <button class="getPass" :style="{ color: item.loginLinkFontColor }">
            找回密码?
          </button>
        </div>
        <div class="row">
          <button
            :style="{ color: radio ? item.loginLinkFontColor : '' }"
            @click="switchCheckRules"
            class="switchCheckRulesBtn"
          >
            <i
              :class="radio ? 'el-icon-success' : 'el-icon-circle-check'"
              :style="{ color: radio ? item.loginLinkFontColor : '' }"
            ></i>
            确认注册即为同意
          </button>
          <a href="" target="_blank" :style="{ color: item.loginLinkFontColor }"
            >《注册协议》</a
          >
        </div>
        <button
          class="loginBtn"
          :style="{
            backgroundImage: setRGBATranstion(item.loginButtonBgColor),
            color: item.loginButtonFontColor,
            opacity: radio ? 1 : 0.5,
          }"
        >
          登 录
        </button>
        <button class="registerBtn" v-if="item.style1DisplayRegister">注 册</button>
      </div>
    </div>

    <div
      class="style2"
      v-if="item.loginStyle === 2"
      :style="{ backgroundColor: item.loginPageBgColor }"
    >
      <span class="headImgBox2">
        <img :src="item.loginHeadImg" v-if="item.loginHeadImg" alt="" class="headIcon" />
      </span>
      <p class="upline"></p>
      <div class="box">
        <p class="title">登 录</p>
        <input
          type="text"
          v-model="account"
          :readonly="readonly"
          class="account"
          maxlength="30"
          placeholder="请输入账号"
          :style="{
              borderTopLeftRadius: item.borderRadiusTop + 'px',
              borderTopRightRadius: item.borderRadiusTop + 'px',
              borderBottomLeftRadius: item.borderRadiusBottom + 'px',
              borderBottomRightRadius: item.borderRadiusBottom + 'px',
          }"
        />
        <input
          type="password"
          v-model="password"
          :readonly="readonly"
          class="password"
          maxlength="30"
          placeholder="请输入密码"
          :style="{
              borderTopLeftRadius: item.borderRadiusTop + 'px',
              borderTopRightRadius: item.borderRadiusTop + 'px',
              borderBottomLeftRadius: item.borderRadiusBottom + 'px',
              borderBottomRightRadius: item.borderRadiusBottom + 'px',
          }"
        />
        <div class="row">
          <button :style="{ color: item.loginLinkFontColor }">找回密码?</button>
        </div>
        <button
          class="loginBtn"
          :style="{
            backgroundImage: setRGBATranstion(item.loginButtonBgColor),
            color: item.loginButtonFontColor,
            opacity: radio ? 1 : 0.5,
            borderTopLeftRadius: item.borderRadiusTop + 'px',
            borderTopRightRadius: item.borderRadiusTop + 'px',
            borderBottomLeftRadius: item.borderRadiusBottom + 'px',
            borderBottomRightRadius: item.borderRadiusBottom + 'px',
          }"
        >
          登 录
        </button>
        <div class="notice">
          <button
            :style="{ color: radio ? item.loginLinkFontColor : '' }"
            @click="switchCheckRules"
            class="switchCheckRulesBtn"
          >
            <i
              :class="radio ? 'el-icon-success' : 'el-icon-circle-check'"
              :style="{ color: radio ? item.loginLinkFontColor : '' }"
            ></i>
            确认注册即为同意
          </button>
          <a href="javascript:;" :style="{ color: item.loginLinkFontColor }">《注册协议》</a>
        </div>
      </div>
      <p class="downline"></p>
      <div class="regBox" v-if="item.style1DisplayRegister">
        <button>
          <!-- <img :src="regIcon" alt="" /> -->
          <span>注册</span>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import head1Icon from "../../../static/images/login_style1.jpeg";
import head2Icon from "../../../static/images/login_style2.jpg";
// import regIcon from "../../../static/images/regIcon.jpg";
import logo2x from "@/static/images/logo2x.png";
export default {
  name: "loginIndexMain",
  data() {
    return {
      item: null,
      head1Icon,
      head2Icon,logo2x,
      // regIcon,

      readonly: true,
      account: "",
      password: "",
      radio: true,
    };
  },
  created() {},
  props: ["controlData"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    Bus.$on("updateSetLoginMainComponentData", (params) => {
      this.readonly = true;
      this.item[params.ename] = params.data;
      setTimeout(() => {
        this.readonly = false;
      }, 1000);
    });
    Bus.$on("updateSetLoginMainComponentAllData", (params) => {
      this.readonly = true;
      let controlData = JSON.parse(params);
      this.item = null;
      this.$nextTick(() => {
        this.item = JSON.parse(JSON.stringify(controlData.main));
        setTimeout(() => {
          this.readonly = false;
        }, 1000);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      this.item = null;
      this.item = JSON.parse(JSON.stringify(this.controlData.main));
      setTimeout(() => {
        this.readonly = false;
      }, 1000);
    },
    setRGBATranstion(c) {
      if (c) {
        let rgb =
          parseInt("0x" + c.substr(1, 2)) +
          "," +
          parseInt("0x" + c.substr(3, 2)) +
          "," +
          parseInt("0x" + c.substr(5, 2));
        return `linear-gradient(to ${
          this.item.loginStyle === 1 ? "right" : "bottom"
        }, rgba(${rgb},0.5), rgba(${rgb},1))`;
      }
    },
    switchCheckRules() {
      this.radio = !this.radio; //console.log(this.radio);
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.loginIndexMain {
  height: 100%;
  button {
    cursor: pointer;
  }
  input {
    outline-width: 1px;
    outline-color: #1890ff;
  }
  .switchCheckRulesBtn {
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    color: #999;
    i {
      width: 18px;
      height: 18px;
      display: inline-block;
      font-size: 18px;
      margin-right: 3px;
      color: #ddd;
    }
  }
  .style1 {
    height: 100%;
    background-color: #8eb3f0;
    .headImgBox{
      min-height:211px;display: block;
      .headIcon {
        width: 100%;
        display: block;
        height: auto;
      }
    }
    .content {
      width: 86.6%;
      margin-left: 6.4%;
      margin-top: -8vh;
      position: relative;
      z-index: 5;
      background-color: #fff;
      border-radius: 10px;
      padding: 20px 30px 20px;
      box-sizing: border-box;
      .head {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        img {
          width: 46px;
          height: 46px;
          border-radius: 100%;
        }
        span {font-size:24px;padding-left:15px;
        }
      }
      .item {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;
        position: relative;
        .iconfont {
          color: #ccc;
        }
        .account {
          height: 40px;
          width: 100%;
          display: flex;
          font-size: 14px;
          align-items: center;
          border: none;
          background-color: transparent;
          padding: 0 10px;
          box-sizing: border-box;
        }
        .password {
          height: 40px;
          width: calc(100% - 90px);
          display: flex;
          align-items: center;
          border: none;
          font-size: 14px;
          background-color: transparent;
          padding: 0 10px;
          box-sizing: border-box;
        }
        button.getPass {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 2;
          width: 80px;
          height: 50px;
          display: flex;
          font-size: 14px;
          align-items: center;
          outline: none;
          border: none;
          justify-content: flex-end;
          color: #5665c2;
          border: none;
          background-color: transparent;
        }
      }
      .row {
        width: 90%;
        height: 50px;
        margin: 0 5% 20px;
        display: flex;
        align-items: center;
        position: relative;
        box-sizing: border-box;
        border-radius: 50px;
        font-size: 12px;

        label {
          display: flex;
          align-items: center;
          color: #666;
        }

        a {
          text-decoration: none;
          color: #5665c2;
        }
      }
      .loginBtn {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        font-size: 16px;
        color: #fff;
        align-items: center;
        border: none;
        background-color: transparent;
        background-image: linear-gradient(to right, #aec4ef, #5665c2);
        margin-bottom: 5px;
        border-radius: 50px;
      }
      .registerBtn {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        font-size: 16px;
        outline: none;
        border: none;
        color: #666;
        align-items: center;
        border: none;
        background-color: transparent;
      }
    }
  }

  .style2 {
    height: 100%;
    background-color: #fd7563;
    display: flex;
    flex-direction: column;
    .headImgBox2{ min-height: 120px;display: block;
    .headIcon {
      width: 100%;
      display: block;
      height: auto;
      margin-bottom: 10px;
    }
    }
    .upline {
      width: 80%;
      margin: 0 auto;
      height: 15px;
      background-color: #fff;
      border-radius: 10px 10px 0 0;opacity:0.4;
    }
    .box {
      width: 86%;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;
      box-sizing: border-box;
      .title {
        font-size: 16px;
        color: #333;
        margin-bottom: 40px;
      }
      .account {
        width: 100%;
        height: 44px;
        background-color: #f2f2f2;
        font-size: 14px;
        color: #333;
        border-radius: 50px;
        border: none;
        padding: 0 10px 0 15px;
        box-sizing: border-box;
        margin-bottom: 25px;
      }
      .password {
        width: 100%;
        height: 44px;
        background-color: #f2f2f2;
        font-size: 14px;
        color: #333;
        border-radius: 50px;
        border: none;
        padding: 0 10px 0 15px;
        box-sizing: border-box;
        margin-bottom: 15px;
      }
      .row {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: flex-end;
        font-size: 14px;
        margin-bottom: 5px;
        button {
          color: #f72924;
          outline: none;
          border: none;
          background-color: transparent;
        }
      }
      .loginBtn {
        width: 100%;
        height: 50px;
        color: #fff;
        border-radius: 50px;
        border: none;
        font-size: 16px;
        outline: none;
        margin-bottom: 15px;
        background-image: linear-gradient(to bottom, #fe8b7c, #f82c27);
      }
      .notice {
        display: flex;
        align-items: center;
        font-size: 14px;
        a {
          color: #f72924;
        }
      }
    }
    .downline {
      width: 80%;
      margin: 0 auto;
      height: 15px;
      background-color: #fff;
      border-radius: 0 0 10px 10px;opacity:0.4;
    }
    .regBox {
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      button {
        width: 70px;height:36px;margin-top:0px;
        outline: none;border:none;
        margin-right: 50px;border-radius:0 0 10px 10px;
        background-color: rgba(255,255,255,0.4);
        position: relative;
        
        &:before{
          content:"";
          position:absolute;left:-10px;z-index:2;top:0px;
          width: 0;
          height: 0;
          border-top: 30px solid rgba(255,255,255,0.4);
          border-right: 0px solid transparent;
          border-bottom: 0px solid transparent; 
          border-left: 10px solid transparent;
          box-sizing:border-box;outline: none;
        }
        &:after{
          content:"";position:absolute;right:-10px;z-index:2;top:0px;
          width: 0;
          height: 0;
          border-top: 30px solid rgba(255,255,255,0.4);
          border-left: 0px solid transparent;
          border-bottom: 0px solid transparent; 
          border-right: 10px solid transparent;
          box-sizing:border-box;outline: none;
        }
        /*img {
          width: 100%;
          display: block;
          height: auto;
          margin-top: -1px;
        }*/
        span {
          position: absolute;
          left: 0;
          top: -2px;
          z-index: 2;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          color: #333;
        }
      }
    }
  }
}
</style>
